<!-- 年龄分布 -->
<template>
  <div>
    <v-echarts :options="options" autoresize :class="$style.echartStyle"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  export default {
    components: { 'v-echarts': ECharts },
    data () {
      return {}
    },

    computed: {
      options () {
        let color = ['#0263FF', '#53FCC0', '#DEEC00', '#8E30FF', '#F35C6E', '#F5A135', '#DBEC00', '#4FFCAD']
        return {
          color: color,
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['product', '18-30', '31-40', '41-50', '500'],
            textStyle: {
              color: '#fff'
            },
            source: [
              {product: 'Matcha Latte', '18-30': 43.3},
              {product: 'Milk Tea','31-40': 73.4},
              {product: 'Cheese Cocoa','41-50': 82.5},
              {product: 'Walnut Brownie','500': 39.1}
            ]
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff'
            }},
          yAxis: {
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        }
      }
    },

    methods: {},
    created () {},
    beforeDestroy () {
      clearInterval(this.timer0)
    }
  }

</script>
<style lang='scss' module>
  .echartStyle{
    width: 100%;
    height: 250px;
    margin: 0 auto;
  }
</style>
